<template>
  <div>
    <div>
	  <Card :bordered="false" dis-hover class="ivu-mt card-style">
		  <Form
		    ref="artFrom"
		    :model="artFrom"
		    :label-width="labelWidth"
		    :label-position="labelPosition"
		    @submit.native.prevent
		  >
		    <Row type="flex" :gutter="24">
		      <Col v-bind="grid">
		        <FormItem label="分群名称：" label-for="pid">
		          <i-select :value="artFrom.pid" placeholder="请选择" style="width: 80%" class="treeSel">
		            <i-option v-for="(item, index) of list" :value="item.value" :key="index" style="display: none">
		              {{ item.title }}
		            </i-option>
		            <Tree :data="treeData" @on-select-change="handleCheckChange"></Tree>
		          </i-select>
		        </FormItem>
		      </Col>
		      <Col v-bind="grid">
		        <FormItem label="创建人：" label-for="pid">
		          <i-select :value="artFrom.pid" placeholder="请选择" style="width: 80%" class="treeSel">
		            <i-option v-for="(item, index) of list" :value="item.value" :key="index" style="display: none">
		              {{ item.title }}
		            </i-option>
		            <Tree :data="treeData" @on-select-change="handleCheckChange"></Tree>
		          </i-select>
		        </FormItem>
		      </Col>
		      <Col v-bind="grid">
		        <Button class="bnt" icon="md-reset">重置</Button>
		        <Button type="primary" style="margin-left: 15px;" class="bnt" icon="md-add">查询</Button>
		      </Col>
		    </Row>
		  </Form>
	  </Card>
    </div>
	
    <Card :bordered="false" dis-hover class="ivu-mt card-style">
	  <Button type="primary" class="button">创建标签</Button>
      <Table
        :columns="columns"
        :data="list"
        ref="table"
        :loading="loading"
        highlight-row
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <template slot-scope="{ row, index }" slot="action">
          <a @click="show(row)">查看</a>
          <Divider type="vertical" />
          <a @click="edit(row)">编辑</a>
          <Divider type="vertical" />
          <a @click="del(row)">删除</a>
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="total"
          :current="artFrom.page"
          show-elevator
          show-total
          @on-change="pageChange"
          :page-size="artFrom.limit"
        />
      </div>
    </Card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { cmsListApi } from '@/api/cms';
import { formatDate } from '@/utils/validate';
export default {
  name: 'case',
  data() {
    return {
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      artFrom: {
        pid: 0,
        title: '',
        page: 1,
        limit: 20,
      },
      total: 0,
      columns: [
        {
          title: '分群名称',
          align: 'left',
          minWidth: 90,
        },
        {
          title: '分群ID',
          align: 'left',
          minWidth: 130,
        },
        {
          title: '覆盖人数',
          align: 'left',
          minWidth: 130,
        },
        {
          title: '创建人',
          align: 'left',
          minWidth: 130,
        },
        {
          title: '创建时间',
          align: 'left',
          minWidth: 130,
        },
        {
          title: '更新人',
          align: 'left',
          minWidth: 130,
        },
        {
          title: '更新时间',
          align: 'left',
          minWidth: 130,
        },
        {
          title: '操作',
          align: 'left',
		  slot:'action',
          minWidth: 130,
        },
      ],
      treeData: [],
      list: [],
      formValidate: {
        type: 1,
      },
    };
  },
  components: {
	  
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 105;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  created() {},
  activated() {
    this.artFrom.pid = this.$route.query.id ? this.$route.query.id : 0;
    this.getList();
  },
  methods: {
    // 等级列表
    getList() {
      this.loading = true;
      cmsListApi(this.artFrom)
        .then(async (res) => {
          let data = res.data;
          this.list = data.list;
          this.total = data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    pageChange(index) {
      this.artFrom.page = index;
      this.getList();
    },
    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1;
      this.getList();
    },
  },
};
</script>

<style scoped lang="stylus">
.treeSel >>>.ivu-select-dropdown-list {
  padding: 0 10px !important;
  box-sizing: border-box;
}

.ivu-table th{
	background-color: #CCC!important;
}
.ivu-table-header table{
	border-top: none!important;
}


.card-style{
	// padding: 10px 20px 20px 20px;
	background: hsla(0,0%,100%,.502);
	border: 2px solid #fff!important;
	border-radius: 8px
}
.page{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.button{
	background-color: #38bf8a;
	color: white;
	margin-bottom: 10px;
	border: 1px solid #d8d8d8;
}
</style>
